<template>
  <div>
    <div style="display: flex; align-items: center">
      供应商编号:<el-input
        v-model="supplierCode"
        style="width: 200px"
      ></el-input>
      供应商名称:<el-input
        v-model="supplierName"
        style="width: 200px"
      ></el-input>
      电话:<el-input v-model="Phone" style="width: 200px"></el-input>
      <el-button type="primary" @click="GetSupplierManagementDtoDtoAsyne()"
        >查询</el-button
      >
      <el-button type="primary" @click="SupplierManagementAdd">添加</el-button>
      <el-button type="danger" @click="PLDelete()">批量删除</el-button>
      <el-button type="success" @click="exportListToExcel(multipleSelection)"
        >导出</el-button
      >
    </div>
    <br />
    <el-table
      ref="multipleTable"
      :data="tableData"
      tooltip-effect="dark"
      style="width: 100%"
      @selection-change="handleSelectionChange"
      border
    >
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column prop="supplierCode" label="供应商编号">
      </el-table-column>
      <el-table-column prop="supplierName" label="供应商名称">
      </el-table-column>
      <el-table-column prop="supplierType" label="类型"> </el-table-column>
      <el-table-column prop="phone" label="电话"> </el-table-column>
      <el-table-column prop="fax" label="传真"> </el-table-column>
      <el-table-column prop="email" label="Email"> </el-table-column>
      <el-table-column prop="contacts" label="联系人"> </el-table-column>
      <el-table-column prop="address" label="地址"> </el-table-column>
      <el-table-column prop="createTime" label="创建时间">
        <template slot-scope="scope">
          {{ scope.row.createTime.substring(0, 10) }}
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="handleEdit(scope.row.id)"
            >编辑</el-button
          >
          <el-button
            type="text"
            size="small"
            @click="handleDelete(scope.row.id)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <br />
    <div>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageIndex"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalCount"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import XLSX from "xlsx";
import {
  GetSupplierManagementDtoDtoAsyne,
  DeleteSupplierManagementDtoAsyne,
  DeletesSupplierManagementIsDisable,
} from "@/api/BasicsDatumServer/BasicsDatumServer";

export default {
  data() {
    return {
      tableData: [],
      supplierCode: "",
      supplierName: "",
      Phone: "",
      pageIndex: 1,
      pageSize: 5,
      totalCount: 0,
      pageCount: 0,
      multipleSelection: [],
    };
  },
  created() {
    this.GetSupplierManagementDtoDtoAsyne();
  },
  //计算属性
  computed: {
    sid() {
      var sid = [];
      this.multipleSelection.forEach((item) => {
        sid.push(item.id);
      });
      return sid;
    },
  },
  methods: {
    // 供应商管理列表
    GetSupplierManagementDtoDtoAsyne() {
      var params = {
        supplierCode: this.supplierCode,
        supplierName: this.supplierName,
        Phone: this.Phone,
        pageIndex: this.pageIndex,
        pageSize: this.pageSize,
      };
      // console.log(params);
      GetSupplierManagementDtoDtoAsyne(params).then((res) => {
        // console.log(res.data, 12111111111111);
        this.tableData = res.data.list.data.result;
        this.totalCount = res.data.list.data.totalCount;
        this.pageCount = res.data.list.data.pageCount;
        // console.log(this.tableData);
      });
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageSize = val;
      this.GetSupplierManagementDtoDtoAsyne();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.pageIndex = val;
      this.GetSupplierManagementDtoDtoAsyne();
    },
    handleDelete(id) {
      this.$confirm("确定要删除吗", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          var myparms = {
            id: id,
          };
          DeleteSupplierManagementDtoAsyne(myparms).then((res) => {
            if (res.data.data > 0) {
              this.$message({
                message: "删除成功",
                type: "success",
              });
              this.GetSupplierManagementDtoDtoAsyne();
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    SupplierManagementAdd() {
      this.$router.push("SupplierManagementAdd");
    },
    handleEdit(id) {
      this.$router.push("SupplierManagementEdit?id=" + id);
    },
    //批量删除获取列表
    handleSelectionChange(val) {
      this.multipleSelection = val;
      console.log(this.multipleSelection);
    },
    //批量删除方法
    PLDelete() {
      if (this.multipleSelection.length == 0) {
        this.$message({
          message: "请选择要删除的数据",
          type: "warning",
        });
        return;
      }

      this.$confirm("此操作将永久批量删除该文件?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          var myparams = {
            delId: this.sid.toString(),
          };
          console.log(myparams, 666666666);
          DeletesSupplierManagementIsDisable(myparams).then((res) => {
            if (res.data.code == 0) {
              this.$message({
                message: "批量删除成功",
                type: "success",
              });
              this.GetSupplierManagementDtoDtoAsyne();
            } else {
              this.$message({
                message: "批量删除失败",
                type: "success",
              });
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消批量删除",
          });
        });
    },
    //导出
    exportListToExcel(multipleSelection) {
      // 过滤需要导出的字段
      const filteredData = multipleSelection.map((item) => {
        return {
          编号: item.id,
          供应商名称: item.supplierName,
          供应商类型: item.supplierType,
          电话: item.phone,
          地址: item.address,
          联系人: item.contacts,
          创建时间: item.createTime,
          备注: item.remark,
        };
      });
      const worksheet = XLSX.utils.json_to_sheet(filteredData);
      //设置表格宽度
      worksheet["!cols"] = [
        { width: 10 },
        { width: 15 },
        { width: 15 },
        { width: 20 },
        { width: 15 },
      ];

      const workbook = XLSX.utils.book_new();
      XLSX.utils.book_append_sheet(workbook, worksheet, "Sheet1");
      // 导出Excel文件
      XLSX.writeFile(workbook, "设备类型.xlsx");
    },
  },
};
</script>

<style></style>